<template>
  <div>
    <button @click="changeName">切换组件</button>
    <component :is="name"></component>
  </div>
</template>

<script>
import One from "@/components/One";
import Two from "@/components/Two";
export default {
  name: "App",
  data() {
    return {
      name: "One",
    };
  },
  components: {
    One,
    Two,
  },
  methods: {
    changeName() {
      this.name = this.name === "One" ? "Two" : "One";
    },
  },
};
</script>

<style></style>
